<template>
  <div class="app-container personal-info">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="personal-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-user"></i> 个人信息</span>
          </div>
          <div class="personal-content">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="avatar-container">
                  <img src="@/assets/images/profile.jpg" alt="个人头像" class="avatar">
                </div>
              </el-col>
              <el-col :span="16">
                <div class="info-container">
                  <h2>张三</h2>
                  <p><i class="el-icon-office-building"></i> <strong>学校：</strong>XX大学</p>
                  <p><i class="el-icon-collection-tag"></i> <strong>专业：</strong>计算机科学与技术</p>
                  <p><i class="el-icon-medal"></i> <strong>学历：</strong>硕士研究生</p>
                  <p><i class="el-icon-message"></i> <strong>邮箱：</strong>zhangsan@example.com</p>
                  <p><i class="el-icon-phone"></i> <strong>电话：</strong>138****1234</p>
                  <p><i class="el-icon-location-outline"></i> <strong>地址：</strong>XX省XX市</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="24">
        <el-card class="thesis-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-document"></i> 毕业论文信息</span>
          </div>
          <div class="thesis-content">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="论文题目">
                基于深度学习的图像识别技术研究与应用
              </el-descriptions-item>
              <el-descriptions-item label="论文类型">
                硕士学位论文
              </el-descriptions-item>
              <el-descriptions-item label="指导教师">
                李教授
              </el-descriptions-item>
              <el-descriptions-item label="完成时间">
                2023年6月
              </el-descriptions-item>
              <el-descriptions-item label="关键词">
                深度学习、图像识别、卷积神经网络
              </el-descriptions-item>
              <el-descriptions-item label="论文摘要">
                本文研究了基于深度学习的图像识别技术，提出了一种改进的卷积神经网络模型，通过实验验证了该模型在多个公开数据集上的有效性。
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="24">
        <el-card class="achievements-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-trophy"></i> 论文成果介绍</span>
          </div>
          <div class="achievements-content">
            <el-timeline>
              <el-timeline-item timestamp="2023年3月" placement="top">
                <el-card>
                  <h4>发表SCI论文</h4>
                  <p>在国际期刊《Pattern Recognition》发表题为"A Novel Deep Learning Approach for Image Recognition"的论文，影响因子：8.5。</p>
                  <el-tag type="success">SCI一区</el-tag>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="2022年12月" placement="top">
                <el-card>
                  <h4>获得国家专利</h4>
                  <p>申请并获得国家发明专利"一种基于深度学习的图像识别方法"，专利号：ZL202210123456.7。</p>
                  <el-tag type="primary">发明专利</el-tag>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="2022年9月" placement="top">
                <el-card>
                  <h4>学术会议报告</h4>
                  <p>在ICCV 2022国际计算机视觉会议上做口头报告，题目为"Deep Learning for Fine-grained Image Recognition"。</p>
                  <el-tag type="warning">国际会议</el-tag>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="2022年6月" placement="top">
                <el-card>
                  <h4>软件著作权</h4>
                  <p>获得软件著作权"基于深度学习的图像识别系统V1.0"，登记号：2022SR123456。</p>
                  <el-tag>软件著作权</el-tag>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "PersonalInfo",
  data() {
    return {
      // 可以在这里添加数据
    };
  },
  methods: {
    // 可以在这里添加方法
  }
};
</script>

<style scoped>
.personal-info {
  padding: 20px;
}

.personal-card, .thesis-card, .achievements-card {
  margin-bottom: 20px;
}

.avatar-container {
  text-align: center;
  padding: 20px;
}

.avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #f0f0f0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.info-container {
  padding: 20px;
}

.info-container h2 {
  margin-top: 0;
  color: #303133;
  margin-bottom: 20px;
}

.info-container p {
  margin-bottom: 10px;
  font-size: 16px;
  color: #606266;
}

.info-container i {
  margin-right: 10px;
  color: #409EFF;
}

.thesis-content {
  padding: 10px;
}

.achievements-content {
  padding: 10px;
}

.el-timeline-item__content {
  padding-bottom: 20px;
}

.el-card {
  margin-bottom: 10px;
}

.el-tag {
  margin-top: 10px;
}
</style>